<template>
  <van-tabbar v-model="active">
    <van-tabbar-item
     v-for="nav in navs"
     :key="nav.path"
     :icon="nav.meta.icon"
     >
     <router-link
      :to="nav.path"
      tag="li"
      :event="$route.path.includes(nav.path) ? '' : 'click'"
     >
     {{nav.meta.title}}
     </router-link>
     </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'
import routes from '@/router/routes'

Vue.use(Tabbar)
Vue.use(TabbarItem)

export default {
  data () {
    return {
      active: 0
    }
  },
  computed: {
    navs () {
      return routes.filter(route => route.meta && route.meta.isTabbar)
    }
  },
  watch: {
    $route: {
      handler: function (newRoute) {
        this.routes = newRoute.meta && newRoute.meta.title
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
  .van-tabbar-item--active{
    color:#f40;
  }
  li {
    list-style: none;
  }
</style>
